<template>
	<view>
		<cu-custom bgColor="bg-cyan" isBack>
			<block slot="content">text文本编辑</block>
		</cu-custom>
		<view class="smart-panel-head">
			<view class="smart-panel-head-title">
				text文本组件
				</view>
				</view>
				<view class="smart-padding-wrap">
					<view class="text-box" scroll-y="true">
						<text>{{text}}</text>
					</view>
					<button type="primary" :disabled="!canAdd" @click="add">add line</button>
					<button type="warn" :disabled="!canRemove" @click="remove">remove line</button>
					</view>
	</view>
</template>

<script>
	export default {
	data() {
	return {
	texts: [
	' HBuilder,400万开发者选择的IDE',
	'HBuilderx,轻巧、极速,极客编辑器',
	'uni-app,终极跨平台方案',
	'HBuilder, 400万开发者选洗择的IDE ',
	' HBuilderX，轻巧、极速,极客编辑器',
	'uni-app,终极跨平台方案',
	'HBuilder, 400万开发者洗择的IDE',
	'HBuilderx,轻巧、极速,极客编辑器',
	'uni-app，终极跨平台方案',
	'...'
	],
	text:'',
	canAdd: true,
	canRemove:false,
	extraLine: []
	};
	},
	methods: {
	add(e) {
	this.extraLine.push(this.texts[this.extraLine.length % 12]);
	this.text=this.extraLine.join('\n');
	this.canAdd=this.extraLine.length < 12;
	this.canRemove=this.extraLine.length > 0;
	},
	remove: function(e) {
	if (this.extraLine.length>0){
	this.extraLine.pop();
	this.text=this.extraLine. join('\n');
	this.canAdd = this.extraLine.length<12;
	this.canRemove = this.extraLine.length>0;
}
}
}
}
</script>

<style>
</style>